<template>
  <tools-bar>
    <div class="content">
      <div style="display: flex; margin-bottom: 10px">
        <template v-for="(btn, index) in btnList">
          <transition-btn
            :id="id"
            :btn="btn"
            :key="index"
            @reload="reload"
          ></transition-btn>
        </template>
        <template v-if="showBtns">
          <deliver-btn :id="id" title="转交" @reload="reload"></deliver-btn>
          <deliver-btn :id="id" title="加签" @reload="reload"></deliver-btn>
        </template>
        <msg-btn :id="id" type="primary" />
        <msg-btn
          :id="id"
          type=""
          title="撤回"
          v-if="enableRetreat"
          @reload="reload"
        />
      </div>
      <div v-if="can_intervene">
        <msg-btn :id="id" type="danger" title="强制关闭工单" />
        <update-state-btn
          :id="id"
          :workflow_id="workflow_id"
          title="强制修改状态"
          @reload="reload"
          type="danger"
        ></update-state-btn>
        <deliver-btn
          :id="id"
          title="强制转交"
          @reload="reload"
          type="danger"
        ></deliver-btn>
      </div>
    </div>
  </tools-bar>
</template>
<script>
import workManagement from "@/api/workManagement/index";
import TransitionBtn from "./transitionBtn";
import UpdateStateBtn from "./updateStateBtn";
import deliverBtn from "./deliverBtn";
import msgBtn from "./msgBtn";
import eventBus from "@/utils/eventBus";
import toolsBar from "@/components/Common/toolsBar";
export default {
  components: { TransitionBtn, UpdateStateBtn, deliverBtn, msgBtn, toolsBar },
  props: {
    workflow_id: {
      type: Number,
      default: 0
    },
    flowInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      reverse: true,
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15"
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13"
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11"
        }
      ],
      id: this.$route.query.id * 1,
      btnList: [],
      can_intervene: false
    };
  },
  computed: {
    enableRetreat() {
      if (this.flowInfo && this.flowInfo.state_info) {
        return (
          this.flowInfo.state_info.enable_retreat &&
          this.flowInfo.creator == localStorage.getItem("username") &&
          this.flowInfo.act_state_id != 3
        );
      } else {
        return false;
      }
    },
    showBtns() {
      return (
        this.btnList &&
        this.btnList.length > 0 &&
        this.btnList[0].in_add_node === false &&
        this.btnList[0].is_accept === false &&
        !(this.flowInfo.creator == localStorage.getItem("username"))
      );
    }
  },
  created() {
    this.getTransitions();
    this.toCanIntervene();
  },
  methods: {
    getTransitions() {
      workManagement.getTransitions(this.id).then(res => {
          this.btnList = res.data.value;
      });
    },
    toCanIntervene() {
      workManagement.toCanIntervene(this.workflow_id).then(res => {
          this.can_intervene = res.data.can_intervene;
      });
    },
    getBtnColor(type) {
      if (type == 1) return "success";
      else if (type == 2) return "danger";
      else return "primary";
    },
    reload() {
      this.getTransitions();
      eventBus.$emit("submitWork");
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #dfe6ec;
  height: 60px;
}
</style>
